<template>
  <view class="root">
    <view class="inner">
      <view class="top">
        <image :src="$baseImgUrl + 'scan-img.png'" class="scan-img"></image>

        <view class="b-text">
          扫描包装盒上的二维码
        </view>
        <view class="s-text">
          将包装盒的图示二维码部分
          放入扫码区域扫描
        </view>
      </view>
      <view class="bottom">
        <u-button text="开始扫码" :custom-style="scanStyle" @click="handleScan"></u-button>
        <u-button text="手动输入设备IMEI码" :custom-style="inputStyle" @click="handleInputImei"></u-button>
      </view>
    </view>
    <yy-watermark></yy-watermark>
  </view>
</template>

<script>
  import {
    Toast,
    getOptionsParams,
    navTo
  } from '../utils/util';

  export default {
    data() {
      return {
        $baseImgUrl: this.$baseImgUrl,
        scanStyle: {
          width: '680rpx',
          height: '96rpx',
          background: 'linear-gradient( 90deg, #51B1FF 0%, #1790F2 100%)',
          'border-radius': '48rpx 48rpx 48rpx 48rpx',
          'font-weight': 500,
          'font-size': '36rpx',
          color: '#FFFFFF',
          'margin-bottom': '43rpx'
        },
        inputStyle: {
          width: '680rpx',
          height: '96rpx',
          background: '#F4F5F7',
          'box-shadow': 'inset 0rpx 3rpx 6rpx 1rpx rgba(0,0,0,0.16)',
          'border-radius': '48rpx 48rpx 48rpx 48rpx'
        },
        routerParams: {}
      }
    },
    onLoad(options) {
      this.routerParams = getOptionsParams(options)
    },
    methods: {
      handleInputImei() {
        navTo({
          url: '/wristWatch/inputImei',
          params: {
            ...this.routerParams
          }
        })
      },
      handleScan() {
        uni.scanCode({
          scanType: ['barCode', 'qrCode'],
          onlyFromCamera: true,
          success: (res) => {
            Toast('扫描成功!')
            console.log(res)
            navTo({
              url: '/wristWatch/inputImei',
              params: {
                ...this.routerParams,
                imei: res.result
              }
            })
          }
        });
      }
    }
  }
</script>

<style lang="scss" scoped>
  .root {
    width: 100%;
    height: 100%;
    background: #F9F9F9;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    padding: 10rpx 16rpx;

    .inner {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      background: #FFFFFF;
      border-radius: 8rpx 8rpx 8rpx 8rpx;
    }

    .top {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;

      .scan-img {
        width: 284rpx;
        height: 284rpx;
        margin: 0 auto;
        margin-top: 191rpx;
        margin-bottom: 88rpx;
      }

      .b-text {
        font-weight: bold;
        font-size: 32rpx;
        color: #333333;
        margin-bottom: 16rpx;
      }

      .s-text {
        font-weight: 500;
        font-size: 26rpx;
        color: #1A1A1A;
      }
    }

    .bottom {
      flex-shrink: 0;
      padding-bottom: 86rpx;

      /deep/.u-button__text {
        font-weight: 500;
        font-size: 36rpx !important;
      }
    }
  }
</style>